<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <PcHeader/>
    <div class="data_div" style="display:flex">
      <div class="data_div_left">
        <el-carousel indicator-position="outside" height="350px" :autoplay="true">
          <el-carousel-item v-for="item in carouselData" :key="item.url">
            <img :src="item.url" style="width: 100%">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="data_div_right">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>最新公告</span>
          </div>
          <div v-for="item in gongGaoList" :key="item.id" class="text item">
            <a :href="'/pc/gonggao/details?id='+item.id"
               class="moreLine">{{ item.name }}</a>
          </div>
        </el-card>
      </div>
    </div>
    <PcCard :cardData="shopData" v-if="open" logo-title="今日推荐"/>
    <PcFooter/>
    <PcUp/>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import variables from '@/assets/styles/variables.scss'
import headTop from '../../components/myComponents/components/top/index'
import PcHeader from '../../components/myComponents/components/header/index'
import PcCarousel from '../../components/myComponents/components/carousel/index'
import PcCard from '../../components/myComponents/components/pc_card/index'
import PcFooter from '../../components/myComponents/components/pc_footer/index'
import PcUp from '../../components/myComponents/components/pc_up/index'
import SuspensionSearch from '@/components/myComponents/components/suspension_search/index'
import {listGongGao, listRoom} from "@/api/pc";

export default {
  name: 'PcLayout',
  components: {
    headTop,
    PcHeader,
    PcCarousel,
    PcCard,
    PcFooter,
    PcUp,
    SuspensionSearch
  },
  data() {
    return {
      screenWidth: document.body.clientWidth, // 屏幕宽度
      screenHeight: document.body.clientHeight, // 屏幕高度
      currentDate: new Date(),
      shopData: [],
      carouselData: [
        {url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.shunde.gov.cn%2Ffssdrg%2Fimg%2F0%2F197%2F197026%2F4673148.jpg&refer=http%3A%2F%2Fwww.shunde.gov.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1675407693&t=21c9ce4c7e163d2ea4845415fe152c91'}
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 8,
      },
      gongGaoList: [],
      open: false,
    }
  },
  created() {
    this.getCardList()
    this.getGongGaoList()
  },
  methods: {
    getGongGaoList() {
      let shopData = [];
      for (let i = this.queryParams.pageNum; i < this.queryParams.pageNum + 8; i++) {
        shopData.push({
          id: 'hanP' + i,
          name: 'JAVA_' + i,
          abstractStr: 'abstractStrabstractStrabstractStr'
        })
      }
      this.gongGaoList = shopData
    },
    getCardList() {
      this.open = false
      let shopData = [];
      for (let i = this.queryParams.pageNum; i < this.queryParams.pageNum + 8; i++) {
        shopData.push({
          id: 'hanP' + i,
          name: 'JAVA_' + i,
          img: 'http://www.java1234.vip/courseImages/20210928113210.jpg',
          currentDate: '2022-08-20',
          price: '199',
          typeId: 1
        })
      }
      this.shopData = shopData
      this.open = true
    }
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables
    }
  }

}
</script>
<style scoped>
.data_div {
  margin: 20px 355px;
  width: 1210px;
  display: flex;
}

.data_div_left {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 900px;
  padding: 16px;
  float: left;
}

.data_div_right {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 282px;
  height: 409px;
  float: right;
  margin-left: 20px;
}

.box-card {
  width: 100%;
  height: 409px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.text {
  font-size: 14px;
}

.item {
  margin-top: 10px;
  margin-bottom: 30px;
}

/* 超出文本显示省略号 */
.moreLine {
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
